<template>
  <div v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.4)" style="position: relative; height: 100%">
    <div class="Faxq_top cardCurBacdground">
      <p> <img src="@/assets/uemap/kuang1.png" width="10" height="10"> 预演类别：<span>{{ listsel.rehearsalType }}</span></p>
      <p v-if="listsel.rehearsal == 1"><img src="@/assets/uemap/kuang1.png" width="10" height="10"> 降雨文件：<span>{{
        listsel.weatherfile }}</span></p>
      <p v-if="listsel.rehearsal == 2"><img src="@/assets/uemap/kuang1.png" width="10" height="10">
        场次名称：<span>{{ listsel.sitename }}</span></p>
      <p v-if="listsel.rehearsal == 3" style="width:100%;letter-spacing: -1px;"><img src="@/assets/uemap/kuang1.png"
          width="10" height="10"> 降雨时段：<span>{{ listsel.measuredstart
            | dateformat }} - {{ listsel.measuredfend | dateformat }}</span></p>
      <p><img src="@/assets/uemap/kuang1.png" width="10" height="10"> 生成时间：<span>{{ listsel.createddate | dateformat
      }}</span></p>
      <p><img src="@/assets/uemap/kuang1.png" width="10" height="10"> 洪水频率：<span>{{ listsel.floodFrequency }}</span></p>
      <p> <img src="@/assets/uemap/kuang1.png" width="10" height="10"> 创建人：<span>{{ listsel.userName }}</span></p>
    </div>
    <div class="jyskfbt cardCurBacdground">
      <p v-if="pageName == 'yuan'" class="RightCardTitle">降雨时刻分布图</p>
      <p v-if="pageName == 'yuyan'" class="RightCardTitle">降雨分布图</p>
      <div class="faxqDivEchatrts" style="width:100%;">
        <Newecharts id="establistEchartDatFaxq" :option="establistEchartDatFaxq" style="width:100%;height: 100%;" />
      </div>

      <!-- 累计雨量 -->
      <!-- <div class="listTables" v-show="pageName=='yuyan'">
        <el-table :data="newTable" fit>
          <template slot="empty">
            <span>无数据</span>
          </template>
          <el-table-column prop="rainFallSum" align="center" label="累计雨量" />
          <el-table-column prop="rainFrequency" align="center" label="降雨频率" />
          <el-table-column prop="name" width="150" align="center" label="降雨时段">
            <template slot-scope="scope">
              <span>{{ scope.row.rainStart | dateformat }}</span><br>
              <span>{{ scope.row.rainEnd | dateformat }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div> -->
      <div v-show="pageName == 'yuyan'" class="tabel_common tabel_commons warpBBoder">
        <div class="table">
          <div class="thead">
            <div class="tr">
              <div class="th" style="flex:1.2"> 累计雨量 </div>
              <div class="th" style="flex:2"> 降雨频率 </div>
              <div class="th" style="flex:2.5"> 降雨时段 </div>
            </div>
          </div>
          <el-scrollbar style="height:7h; width: 100%;" class="el_scrollbar">
            <div class="tbody">
              <div class="tr" v-for="(item, index) in newTable" :key="index">
                <div class="td" style="flex:1.2"> {{ item.rainFallSum }} mm </div>
                <!-- <div class="td" style="-webkit-line-clamp: 5;flex:2"> {{ item.rainFrequency }}山洪灾害村级预案 </div> -->
                <div class="td" style="-webkit-line-clamp: 5;flex:2"> {{ item.rainFrequency }} </div>
                <div class="td" style="-webkit-line-clamp: 5;flex:2.5"> {{ item.rainStart | dateformat }}至{{ item.rainEnd
                  | dateformat }}</div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
      <!--  -->
      <!-- 隐患点 -->
      <!-- <div class="tableFaxq listTablesOther">
        <el-table :data="listsel.hiddendanger_InfoSels" fit style="width: 100%;height: 100%;"
          @row-click="planDetailsRowClick">
          <template slot="empty">
            <span>无隐患设置/无堵水</span>
          </template>
          <el-table-column prop="name" align="center" label="隐患点" />
          <el-table-column prop="name" width="150" align="center" label="桥梁堵水时间">
            <template slot-scope="scope">
              <span> {{ scope.row.hiddenbegin | dateformat }}</span><br>
              <span> {{ scope.row.hiddenend | dateformat }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div> -->
      <div v-show="pageName == 'yuyan' || pageName == 'yuan'" class="tabel_common tabel_commons warpBBoder">
        <div class="table">
          <div class="thead">
            <div class="tr">
              <div class="th" style="flex:1"> 隐患点 </div>
              <div class="th" style="flex:2"> 桥梁堵水时间 </div>
            </div>
          </div>
          <el-scrollbar :style="pageName == 'yuyan' ? 'height:14vh; width: 100%;' : 'height:24vh; width: 100%;'"
            class="el_scrollbar">
            <div class="tbody">
              <!-- <div v-show="listsel.hiddendanger_InfoSels == null || listsel.hiddendanger_InfoSels.length==0  ">
                <span>无隐患设置/无堵水</span>
              </div>  -->
              <div v-if="listsel.hiddendanger_InfoSels == null || listsel.hiddendanger_InfoSels.length == 0">
                <div v-show="pageName == 'yuyan'" slot="no-results" class="noData"
                  style="background-position: center 28%;padding-top: 26%;">无隐患设置/无堵水</div>
                <div v-show="pageName == 'yuan'" slot="no-results" class="noData"
                  style="background-position: center 68%;padding-top: 40%;">无隐患设置/无堵水</div>
              </div>
              <div v-else>
                <div class="tr" v-for="(item, index) in listsel.hiddendanger_InfoSels" :key="index">
                  <!-- :class="['tr', PonitId == index ? 'ta' : '']"> -->
                  <div class="td" style="flex:1"> {{ item.name }} </div>
                  <div class="td" style="-webkit-line-clamp: 1;flex:2."> {{ item.hiddenbegin | dateformat }}至{{
                    item.hiddenend | dateformat }}</div>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { SelRehearsal } from '../../../api/xuna.js'
import Newecharts from '@/views/components/newecharts.vue'
import * as echarts from 'echarts'
import moment from 'moment'
export default {
  components: {
    Newecharts
  },
  props: ['pageName'],
  data() {
    return {
      loading: false,
      tableData: [],
      idParams: {},
      listsel: {},
      establistEchartDatFaxq: {},
      faxqID: '',
      newTable: []
    }
  },
  mounted() {
  },
  beforeDestroy() {
    this.$eventBus.$off('schemeFxId')
  },
  created() {
    this.$eventBus.$on('schemeFxId', res => {
      this.faxqID = res
      this.getSelRehearsal()
    })
    console.log('pageName', this.pageName);

  },
  methods: {
    planDetailsRowClick(e) {
      this.$eventBus.$emit('HDState', { action: '隐患行选择', id: e.pointsid })
    },
    getSelRehearsal() {
      this.loading = true
      this.$nextTick(() => {
        SelRehearsal({ id: this.faxqID }).then((res) => {
        if (res.isSuccess) {
          this.listsel = res.data
          console.log('方案详情数据',this.listsel);
          
          this.newTable = []
          this.newTable.push({
            rainFallSum: res.data.rainFallSum,
            rainFrequency: res.data.rainFrequency,
            rainStart: res.data.measuredstart,
            rainEnd: res.data.measuredfend
          })
          this.$eventBus.$emit('HDState', { action: '方案详情', list: res.data.hiddendanger_InfoSels })
          this.getestablistEchartFaxq(res.data.rEHEARSAL_DETAILSels)
          this.loading = false
        }
      })
      })
      
    },
    // 图表
    getestablistEchartFaxq(dataEchart) {
      const jyData = []; const xData = []
      dataEchart.map((v) => {
        jyData.push(Number(v.arealp))
        xData.push(moment(v.raintime).format('YYYY-MM-DD HH:mm'))
      })
      this.establistEchartDatFaxq = {
        tooltip: {
          backgroundColor: 'rgba(2, 0, 31,0.65)',
          borderColor: '#333',
          trigger: 'axis',
          triggerOn: 'mousemove',
          confine: true,
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          },
          textStyle: {
            color: '#fff'
          }
        },
        legend: {
          show: true,
          data: ['面雨量'],
          itemHeight: 8,
          itemWidth: 12,
          textStyle: {
            fontSize: 12,
            color: '#fff'
          },
          x: 'right'
        },
        grid: {
          x: 35,
          y: 35,
          x2: 25,
          y2: 35
        },
        xAxis: [
          {

            type: 'category',
            data: xData.map(function (v, i) {
              if (i === 0) {
                return moment(xData[i]).format('YYYY-MM-DD')
              } else {
                return moment(xData[i]).format('MM月DD日 HH:mm')
              }
            }),
            axisPointer: {
              type: 'shadow',
              interval: xData.length > 6 ? 1 : 0,
              color: '#fff'

            },
            axisLabel: {
              textStyle: {
                fontSize: 10,
                color: '#fff'
              }
            },
            axisTick: {
              lineStyle: {
                color: '#fff',
              }
            },
          }
        ],
        yAxis: {
          type: 'value',
          name: '面雨量(mm)',
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: ['rgba(148, 193, 248, 0.14)']
            }
          },
          nameTextStyle: {
            color: '#fff',
            fontSize: 12
          },
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#fff'
            }
          },
          labels: {
            align: 'left',
            x: -8,
            y: 5,
            style: {
              color: '#fff'
            }
          }
        },
        series: [
          {
            data: jyData,
            name: '面雨量',
            type: 'bar',
            barCategoryGap: '5%',
            barMaxWidth: '80%',
            itemStyle: {
              // borderType: 'solid',
              // color: '#3abbfe' // 柱条颜色
              normal: {
                // 渐变了
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#00E4FF' },
                  { offset: 1, color: '#0039BB' }
                ])
              }
            },
            tooltip: {
              valueFormatter: function (value) {
                return value + 'mm'
              }
            }
          }
        ]
      }
    },
    clientWidth(str) {
      console.log(str)
      this.$nextTick(function () {
        let widthSize, heightSize;
        // return;
        if (str === 1) {
          widthSize = document.querySelector('.faxqDivEchatrts').clientWidth
          heightSize = document.querySelector('.water_wrap').clientHeight / 4.5
        } else {
          widthSize = document.querySelector('.table-body').clientWidth - 20
          heightSize = document.querySelector('.table-body').clientHeight / 4
        }
        //console.log(widthSize, heightSize)
        let myChart = ''
        myChart = this.$echarts.init(document.getElementById('establistEchartDatFaxq'))
        const widthResize = {
          width: widthSize,
          height: heightSize
        }
        myChart.resize(widthResize)
      })

    }
  }
}
</script>
<style lang="less" scoped>
.Faxq_top {
  //padding: 10px 0 0 10px;
  line-height: 25px;
  margin-bottom: 5px;

  p {
    //width: 100%;
    width: 97%;
    height: 32px;
    line-height: 32px;
    margin-bottom: 3px;
    background: url("~@/assets/uemap/kuang.png") no-repeat top center;
    background-size: 100% 100%;
    padding-left: 3%;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #D1E8ED;
  }

  span {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #FFFFFF;
  }
}

.name_Faxq {
  height: 30px;
  line-height: 30px;
  width: 100%;
  // color: #5688d8;
}

.jyskfbt {
  padding: 5px;
  height: calc(100% - 160px)
}

.RightCardTitle {
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #FFFFFF;
}

.establistEchartDatFaxq {
  height: 180px;
}

.tableFaxq {
  //height: 42%;
  height: 54%;
}

.faxqDivEchatrts {
  height: 182px !important;
  border-bottom: 1px solid #3F72AA;
  margin-bottom: 10px;
}

.Submerge {
  height: 15%;
  color: #ffffff;
  font-size: 12px;
  text-align: center;
  display: -webkit-flex;
  display: flex;
  margin-bottom: 10px;
  justify-content: space-between;
  align-items: center;

  >div {
    width: 25%;
    height: 100%;

    span {
      font-weight: bold;
      font-size: 16px;
      display: block;
      width: 100%;
      height: 80%;
      padding-top: 20%;
      box-sizing: border-box;
      text-shadow: 0px 0px 9px rgba(188, 248, 255, 0.79);
      background: url("~@/assets/newimg/StatisticsBg.png") no-repeat top center;
      background-size: 90% 100%;
    }
  }
}

div.tabel_commons div.table div.tbody div.tr {
  height: 6vh;
}

.warpBBoder {
  border-bottom: 1px solid #3F72AA;
  margin-bottom: 10px;
  padding-bottom: 7px;
}

div.tabel_common div.table div.thead {
  padding: 0px;
}

div.tabel_common div.table div.tbody {
  padding: 0px;
}</style>
